<template>
	<view class="social-users_page h-full">
		<van-tabs
			v-model:active="active"
			swipeable
			title-active-color="#409eff"
			title-inactive-color="#000000"
			:animated="true"
			:lazy-render="false"
		>
			<van-tab :title="i" v-for="i in tabList" :name="i">
				<List
					@remoke="handleRemoke"
					@refuse="handleRefuse"
					@pass="handlePass"
					@guideRefuse="handleGuideRefuse"
					@guidePass="handleGuidePass"
					:tabValue="active"
					location="my"
					v-if="i === active"
					ref="listRef"
				/>
			</van-tab>
		</van-tabs>
		<van-popup
			v-model:show="remokeShow"
			:style="{ padding: '20rpx', borderRadius: '20rpx' }"
		>
			<van-form @submit="confirmRemoke">
				<van-cell-group inset>
					<van-field
						v-model="remokeFormData.reason"
						rows="3"
						autosize
						label="撤销理由"
						type="textarea"
						placeholder="请输入撤销理由"
						required
						:rules="[{ required: true, message: '请输入撤销理由' }]"
						error-message-align="right"
						clearable
					/>
				</van-cell-group>
				<view style="text-align: right">
					<van-button type="primary" native-type="submit">
						确认撤销
					</van-button>
				</view>
			</van-form>
		</van-popup>
		<van-popup
			v-model:show="refuseShow"
			:style="{ padding: '20rpx', borderRadius: '20rpx' }"
		>
			<van-form @submit="confirmRefuse">
				<van-cell-group inset>
					<van-field
						v-model="refuseFormData.reason"
						rows="3"
						autosize
						:label="refuseType === 'jjy' ? '拒绝理由' : '驳回理由'"
						type="textarea"
						placeholder="请输入理由"
						required
						:rules="[{ required: true, message: '请输入理由' }]"
						error-message-align="right"
						clearable
					/>
				</van-cell-group>
				<view style="text-align: right">
					<van-button type="primary" native-type="submit">
						{{ refuseType === "jjy" ? "确认拒绝" : "确认驳回" }}
					</van-button>
				</view>
			</van-form>
		</van-popup>
	</view>
</template>
<script setup>
import {
	getOwnStatusFlagApi,
	getReservationCancellApi,
	getReservationPasslApi,
	getReservationRefuselApi,
} from "@/api";
import List from "../components/list/allList.vue";
const useDict = useDictStore();
// 获取状态枚举
const AppointmentStatusEnum = useDict.getData("RESERVATION_STATUS");
const listRef = ref(null);
// 判断拒绝弹窗类
const refuseType = ref("");
// tab当前值
const active = ref(AppointmentStatusEnum.ALL.label);
const tabList = ref([]);
//撤销
const remokeShow = ref(false);
const remokeFormData = ref({
	id: null,
	reason: "",
});

const handleRemoke = (res) => {
	remokeFormData.value.id = res.id;
	remokeShow.value = true;
};
const confirmRemoke = async () => {
	await getReservationCancellApi(remokeFormData.value);
	feedback.toast("撤销成功");
	remokeShow.value = false;
	listRef.value[0].loadData(1);
};

//拒绝
const refuseShow = ref(false);
const refuseFormData = ref({
	id: null,
	reason: "",
});

const handleGuideRefuse = (res) => {
	refuseType.value = "jjy";
	refuseFormData.value.id = res.id;
	refuseShow.value = true;
};
const confirmRefuse = async () => {
	await getReservationRefuselApi(refuseFormData.value);
	feedback.toast((refuseType.value = "jjy" ? "已拒绝" : "审核已驳回"));
	refuseShow.value = false;
	listRef.value[0].loadData(1);
};

// 接受
const handleGuidePass = async (res) => {
	await getReservationPasslApi({ id: res.id });
	feedback.toast("已接受");
	listRef.value[0].loadData(1);
};

// 通过
const handlePass = async (res) => {
	await getReservationPasslApi({ id: res.id });
	feedback.toast("审核已通过");
	listRef.value[0].loadData(1);
};

// 驳回
const handleRefuse = async (res) => {
	refuseType.value = "bh";
	refuseFormData.value.id = res.id;
	refuseShow.value = true;
};

onLoad(async (option) => {
	if (option) {
		active.value = option.id;
	}
	const { data } = await getOwnStatusFlagApi({ location: "my" });
	tabList.value = data;
});
onPullDownRefresh(async () => {
	uni.startPullDownRefresh();
	await listRef.value[0].loadData(1);
	uni.stopPullDownRefresh();
});
</script>
<style lang="scss" scoped>
.social-users_page {
	:deep(.van-tabs, ) {
		height: 100%;
	}
	:deep(.van-tabs__nav) {
		background-color: $uni-bg-color-grey !important;
	}
	:deep(.van-tab__panel) {
		height: 100%;
	}
	:deep(.van-tabs__content) {
		height: calc(100% - var(--van-tabs-line-height) - var(--window-bottom));
	}
}
</style>
